设为首页收藏本站
开启辅助访问

JavaScript笔记大全（汇总）

 您所在的位置：网站首页 › javascript 笔记 › JavaScript笔记大全（汇总）

JavaScript笔记大全（汇总）

2024-06-28 01:27| 来源: 网络整理| 查看: 265

本文JavaScript笔记用于平常查阅使用

笔记目录 一、Date（日期） 对象1. get方法2. to方法3.set方法 二、Math / 随机生成三、数组API1.数组API2.数组遍历 四、字符串API五、DOM对象1.元素节点2.获取或插入内容3.获取元素属性4.创建或插入节点5.其它 六、事件对象七、BOM对象1.Window 对象属性2.Window 对象方法3.Navigator 对象4.Screen 对象5.History 对象6.Location 对象 八、正则表达式1.修饰符2.正则方法3.正则表达式模式4.重复类5.量词符6.先行断言7.先行否定断言 九、其它1.this绑定2.constructor3. instanceof4.继承5.字符串(String)与json的相互转换1.字符串转json2.json转字符串6.其它

一、Date（日期） 对象

日期对象用于处理日期和时间。

1. get方法 属性说明getFullYear()获取年份getMonth()获取月份getDate()获取日期getDay()获取星期几getHours()获取小时getMinutes()获取分钟getSeconds()获取秒钟getMilliseconds()获取毫秒getTime()获取1970年至今的毫秒数 同 Date.now() 2. to方法 属性说明toString()把日期对象转字符串toLocaleString()把日期对象转成符合当地习惯的字符串toDateString()把时间对象的日期部分转字符串toLocaleDateString()把时间对象的日期部分转成符合当地习惯的字符串toTimeString()把时间对象的时间部分转字符串toLocaleTimeString()把时间对象的时间部分转成符合当地习惯的字符串toUTCString()把日期对象转UTC时间字符串 3.set方法 属性说明setFullYear()设置年份setMonth()设置月份setDate()设置日期setHours()设置小时setMinutes()设置分数setSeconds()设置秒数setMilliseconds()设置毫秒

创建时间对象:

var date = new Date();

或

var date = new Date(dateString);

代码如下（以“2022-1-14 09:58:27 星期五” 为例）

// 实例时间对象 var date = new Date(); // get var year = date.getFullYear(); // 2022 var month = date.getMonth()+1; // 默认月份从 0 开始，所以要 +1 ，结果为: 1 var newDate = date.getDate(); // 14 var day = date.getDay(); // 5 var hours = date.getHours(); // 9 var minutes = date.getMinutes(); // 58 var seconds = date.getSeconds(); // 27 var milliseconds = date.getMilliseconds(); // 735 var time = date.getTime(); // 1642125892270 // to var toString = date.toString(); // typeof strTime = "String" var toLocaleString = date.toLocaleString(); // 2022/1/14 上午9:58:27 var toDateString = date.toDateString(); // Fri Jan 14 2022 var toLocaleDateString = date.toLocaleDateString(); // 2022/1/14 var toTimeString = date.toTimeString(); // 09:58:27 GMT+0800 (中国标准时间) var toLocaleTimeString = date.toLocaleTimeString(); // 上午9:58:27 var toUTCString = date.toUTCString(); // Fri, 14 Jan 2022 02:45:38 GMT // set date.setFullYear(2024); date.setMonth(1); date.setDate(19); date.setHours(08); date.setMinutes(00); date.setSeconds(00); date.setMilliseconds(00); console.log(date); // Mon Feb 19 2024 08:00:00 GMT+0800 (中国标准时间) 二、Math / 随机生成 属性说明ceil()对数进行上舍入，即向上取整round()四舍五入foor()对 x 进行下舍入，即向下取整random()返回 0 ~ 1 之间的随机数，包含 0 不包含 1

代码如下（获取从 1 到 10 的随机整数，取 0 的概率极小）

Math.ceil(Math.random()*10)

代码如下（可均衡获取 0 到 1 的随机整数）

Math.round(Math.random())

代码如下（可均衡获取 0 到 9 的随机整数）

Math.floor(Math.random()*10)

代码如下（基本均衡获取 0 到 10 的随机整数，其中获取最小值 0 和最大值 10 的几率少一半）

Math.round(Math.random()*10) 三、数组API

数组对象的作用是：使用单独的变量名来存储一系列的值。

1.数组API 属性说明push()往数组的尾部插入一个或多个元素pop()从数组的尾部删除一个元素unshift()往数组的头部插入一个或多个元素shift()从数组的头部删除一个元素slice()裁切数组splice()删除或替换数组某个元素concat()连接一个或多个数组, 不会修改原数组, 会返回连接出来的新数组join()以特定的连接符将一个数组连接成字符串, 不会修改原数组reverse()反转数组

代码如下（例子）

var arr = [1, 2, 3]; var newArr = arr.push(4); // 修改原数组,返回新数组长度 4,arr = [1, 2, 3, 4] var newArr = arr.pop(); // 修改原数组,返回被删除的元素 4,arr = [1, 2, 3] var newArr = arr.unshift(0); // 修改原数组,返回新数组长度 4,arr = [0, 1, 2, 3] var newArr = arr.shift(); // 修改原数组,返回被删除的元素 0,arr = [1, 2, 3] var newArr = arr.slice(0,2); // 不会修改原数组,返回被裁切出来的数组 [1, 2],arr = [1, 2, 3] var newArr = arr.slice(1); // 如果只有一个参数, 则作为开始下标 裁切到数组尾部 var newArr = arr.splice(1,2);// 会修改原数组,返回切割出来的数组 [2, 3],arr = [1] var newArr = arr.splice(1); // 如果只有一个参数, 则作为开始裁切的下标, 裁切到数组尾部 var newArr = arr.splice(1,2,0,0); // 替换,newArr=[1, 2],arr=[1, 0, 0] var newArr = arr.concat([4, 5, 6]); // 不会修改原数组,会返回连接出来的新数组 [1,2,3,4,5,6] var newArr = arr.join("-"); // 不会修改原数组, 返回连接过后的新字符串 1-2-3-4-5-6 var newArr = arr.reverse(); // 会修改原数组,返回反转过后的数组 [6,5,4,3,2,1] 2.数组遍历 every() 用于检测数组所有元素是否都符合指定条件filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素forEach() 对数组的每个元素执行一次给定的函数map() 创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。some() 用于检测数组中的元素是否满足指定条件findIndex() 返回数组中满足条件的第一个元素的索引。若没有找到对应元素则返回-1。

代码如下（every）

// 是否全部大于0 let arr = [1,2]; let flag = arr.every( item => { return item > 0; }); console.log(flag); // true

代码如下（filter）

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var newArr = arr.filter( item => { // 筛选符合条件的部分 if (item % 2 == 0) { return true; // 函数执行的结果为true, 则当前元素就是过滤出来的元素, 会返回成新数组 } }); console.log("筛选出来的数组 =>", newArr); // [2，4，6，8，10];

代码如下（forEach）

var arr = [1, 2, 3,]; arr.forEach( (item,index,array) => { console.log("数组的每一项 =>", item); console.log("数组的下标 =>", index); console.log("数组本身 =>", array); });

代码如下（map）

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var newArr = arr.map( item => { // 把每一个元素 放大两倍, 然后返回成新的数组 e = e * 2 + 1; return e; }); console.log("新数组 =>", newArr); // [3, 5, 7, 9, 11, 13, 15, 17, 19, 21]

代码如下（some）

// 是否全部大于0 let arr = [1,2]; let flag = arr.some( item => { return item > 0; }); console.log(flag); // true

代码如下（findIndex）

let arr = [5, 12, 8, 130, 44]; let index = arr.findIndex( item => item == 12); console.log(index); // 1 四、字符串API 属性说明charAt()获取指定下标的字符charCodeAt()如果不传参数, 把第0个字符转unicode编码String.fromCharCode()静态方法,把unicode编码转成字符substring()裁切字符串,从开始下标裁切到结束下标,结束下标裁切不到split()把字符串切割成数组repeat()重复一个字符串n次trim()去除字符串左右两边的空格, 中间的空格则不做处理toLowerCase()把字符串转小写toUpperCase()把字符串转大写replace()替换indexOf()从头部开始检索下标lastIndexOf()从尾部开始检索下标

代码如下（例子）

var str = "hello wolrd"; var newStr = str.charAt(0); // 获取下标值 h var newStr = str.charCodeAt(0); // 获取下标值并转换为unicode编码 104 var newStr = String.fromCharCode(104); // 把unicode编码转成字符 h var newStr = str.substring(1,4);// 从开始下标裁切到结束下标,结束下标裁切不到 ell var newStr = str.split(" "); // 把字符串切割成数组 ["hello", "wolrd"] var newStr = str.repeat(2); // 重复字符串 hello wolrdhello wolrd var newStr = str.trim(); // 去除字符串左右两边的空格 hello wolrd var newStr = str.toLowerCase(); // 把字符串转小写 hello wolrd var newStr = str.toUpperCase(); // 把字符串转大写 HELLO WOLRD var newStr = str.replace("h","w"); // 替换 wello Wolrd var newStr = str.indexOf("h"); // 从头部开始检索下标 0 var newStr = str.lastIndexOf("l"); // 从尾部开始检索下标 8 五、DOM对象 1.元素节点

文档本身是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性是属性节点 HTML 元素内的文本是文本节点 注释是注释节点

属性说明parentNode获取父节点,包括文本节点和注释节点firstChild获取第一个子节点lastChild获取最后一个子节点nextSibling获取下一个同胞节点previousSibling获取上一个同胞节点parentElement获取父元素版本节点，不包括文本节点和注释节点firstElementChild获取第一个子节点的元素版本lastElementChild获取最后一个子节点的元素版本nextElementSibling获取下一个同胞节点的元素版本previousElementSibling获取上一个同胞节点的元素版本

代码如下（例子）

这是第1个li 这是第2个li 这是第3个li 这是第4个li 这是第5个li 这是第6个li var ele = document.getElementById("list"); console.log("父节点=>",ele.parentNode); // div#box console.log("第一个子节点=>",ele.firstChild); // #text console.log("最后一个子节点=>",ele.lastChild); // #text console.log("上一个同胞节点=>",ele.previousSibling); // #text console.log("上一个同胞节点=>",ele.previousSibling); // #text console.log("父元素版本节点=>",ele.parentElement); // div#box console.log("第一个元素节点=>",ele.firstElementChild); // li.item console.log("最后一个元素节点=>",ele.lastElementChild); // li.item console.log("上一个同胞元素节点=>",ele.previousElementSibling); // p#text console.log("下一个同胞元素节点=>",ele.nextElementSibling); // div#p 2.获取或插入内容 属性说明innerHTML获取元素内部的所有内容 (包括文本和元素)innerText获取元素内部的文本内容 (只获取文本不获取元素)textContent获取元素内部的文本内容 (只获取文本不获取元素) 3.获取元素属性 属性说明getAttributeNode()获取元素属性节点getAttribute()获取元素属性的属性值setAttribute()设置元素属性的属性值removeAttribute()删除元素的属性hasAttribute()判断元素是否具有某个属性

代码如下（例子）

console.log(div.getAttributeNode("id")); // div, typeof = "Object" console.log(div.getAttribute("id")); // div, typeof = "string" console.log(div.setAttribute("id","dd")); // undefined, 修改id为dd console.log(div.removeAttribute("id")); // undefined, 删除id console.log(div.hasAttribute("id")); // true 4.创建或插入节点 属性说明createTextNode()创建文本节点createElement()创建元素节点appendChild()把节点插入到元素内部的结尾部分nsertBefore()把节点插入到元素内部的指定元素的前面removeChild()在节点中移除指定的子节点remove()移除本身replaceChild()用新的节点替换旧的节点cloneNode()克隆节点crateDocumentFragment()创建临时文档，虚拟DOM节点

代码如下（例子）

var h1 = document.createElement("h1"); h1.textContent = "这是一个创建的标题标签"; document.body.appendChild(h1); document.body.insertBefore(h1); document.body.removeChild(h1); var text = document.createTextNode; text.textContent = "这是一个创建的文本"; document.body.appendChild(text); document.body.insertBefore(text); document.body.removeChild(text) // 传递一个可选的参数决定是否要拷贝子节点(默认: false不拷贝子节点) (true拷贝子节点) var cloneNode = text.cloneNode(true); 5.其它 属性说明element.nodeName获取节点名字（大写)element.calssName设置或获取节点类名element.id设置或获取节点idelement.style设置或获取节点样式element.dataset设置自定义属性element.classList.add()添加类名element.classList.toggle()切换类名element.classList.remove()移除类名element.classList.replace()替换类名element.offsetHeight返回元素的高度element.offsetTop返回元素的垂直偏移位置element.scrollTop返回元素上边缘与视图之间的距离element.clientHeight返回元素的可见高度element.offsetTop返回元素的垂直偏移位置

代码如下（例子）

console.log(box.parentNode); // DIV console.log(box.calssName); // div console.log(box.id); // box console.log(box.dataset.id); // 1 // 设置类名(会把所有类名覆盖) box.calssName = "newCalss"; // 设置id(会把所有id覆盖) box.id = "newId"; // 设置样式 box.style.background = "red"; // 添加类名 box.classList.add("add"); // 切换类名,如果有该类名就移除该类名，如果没有就添加 box.classList.toggle("div"); // 移除类名 box.classList.remove("div"); // 替换类名 box.classList.replace("div","newDiv"); 六、事件对象

菜鸟详细地址

七、BOM对象

所有浏览器都支持 window 对象。它表示浏览器窗口 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员 全局变量是 window 对象的属性 全局函数是 window 对象的方法 甚至 HTML DOM 的 document 也是 window 对象的属性之一

1.Window 对象属性 属性描述closed返回窗口是否已被关闭。defaultStatus设置或返回窗口状态栏中的默认文本。document对 Document 对象的只读引用。frames返回窗口中所有命名的框架。history对 History 对象的只读引用。请参数 History 对象。innerHeight返回窗口的文档显示区的高度。innerWidth返回窗口的文档显示区的宽度。localStorage在浏览器中存储 key/value 对。没有过期时间。length设置或返回窗口中的框架数量。location用于窗口或框架的 Location 对象。name设置或返回窗口的名称。navigator对 Navigator 对象的只读引用。opener返回对创建此窗口的窗口的引用。outerHeight返回窗口的外部高度，包含工具条与滚动条。outerWidth返回窗口的外部宽度，包含工具条与滚动条。pageXOffset设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset设置或返回当前页面相对于窗口显示区左上角的 Y 位置。parent返回父窗口。screen对 Screen 对象的只读引用。screenLeft返回相对于屏幕窗口的x坐标screenTop返回相对于屏幕窗口的y坐标screenX返回相对于屏幕窗口的x坐标sessionStorage在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。screenY返回相对于屏幕窗口的y坐标self返回对当前窗口的引用。等价于 Window 属性。status设置窗口状态栏的文本。top返回最顶层的父窗口。 2.Window 对象方法 方法描述alert()显示带有一段消息和一个确认按钮的警告框。atob()解码一个 base-64 编码的字符串。btoa()创建一个 base-64 编码的字符串。blur()把键盘焦点从顶层窗口移开。clearInterval()取消由 setInterval() 设置的 timeout。clearTimeout()取消由 setTimeout() 方法设置的 timeout。close()关闭浏览器窗口。confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。createPopup()创建一个 pop-up 窗口。focus()把键盘焦点给予一个窗口。getSelection()返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。getComputedStyle()获取指定元素的 CSS 样式。matchMedia()该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。moveBy()可相对窗口的当前坐标把它移动指定的像素。moveTo()把窗口的左上角移动到一个指定的坐标。open()打开一个新的浏览器窗口或查找一个已命名的窗口。print()打印当前窗口的内容。prompt()显示可提示用户输入的对话框。resizeBy()按照指定的像素调整窗口的大小。resizeTo()把窗口的大小调整到指定的宽度和高度。scroll()已废弃。 该方法已经使用了 scrollTo() 方法来替代。scrollBy()按照指定的像素值来滚动内容。scrollTo()把内容滚动到指定的坐标。setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。setTimeout()在指定的毫秒数后调用函数或计算表达式。stop()停止页面载入。 3.Navigator 对象

Navigator 对象包含有关浏览器的信息。如：获取浏览器名称、版本信息、操作系统平台信息等等。 调用方式：window.navigator 或者 navigator。

属性说明appCodeName返回浏览器的代码名appName返回浏览器的名称appVersion返回浏览器的平台和版本信息cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值platform返回运行浏览器的操作系统平台userAgent返回由客户机发送服务器的user-agent 头部的值 4.Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。如：获取屏幕高度、宽度等等。 调用方式：window.screen 或者 screen。

属性说明availHeight返回屏幕的高度（不包括Windows任务栏）availWidth返回屏幕的宽度（不包括Windows任务栏）colorDepth返回目标设备或缓冲器上的调色板的比特深度height返回屏幕的总高度pixelDepth返回屏幕的颜色分辨率（每象素的位数）width返回屏幕的总宽度 5.History 对象

history 对象包含用户（在浏览器窗口中）访问过的 URL。可对当前页的浏览历史进行操作，如：前进、后退等。但不能知道浏览了哪些URL。 调用方式：window.history 或者 history。

属性或方法说明length返回历史列表中的网址数back()加载 history 列表中的前一个 URLforward()加载 history 列表中的下一个 URLgo()加载 history 列表中的某个具体页面 6.Location 对象

Location 对象包含有关当前 URL 的信息。 Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。，如：导航到新的页面、获取URL信息等。 调用方式：window.location 或者 location。

属性或方法说明hash返回一个URL的锚部分host返回一个URL的主机名和端口hostname返回URL的主机名href返回完整的URLpathname返回的URL路径名。port返回一个URL服务器使用的端口号protocol返回一个URL协议search返回一个URL的查询部分assign()载入一个新的文档reload()重新载入当前文档replace()用新的文档替换当前文档

代码如下（例子）

// 在当前页面 打开网址 window.open("https://www.baidu.com","名称", "_self"); // 跳转到页面中的指定坐标 // smooth (平滑滚动)， // nstant (瞬间滚动)，默认值 auto，效果等同于 instant window.scroll({ top: 2000, left: 0, behavior: 'smooth' }); // 页面跳转, 可以返回上一个页面栈 window.location.href = "https://www.baidu.com"; window.location.assign("https://www.baidu.com"); // 直接替换页面, 无法返回上一个页面栈 window.location.replace("https://www.baidu.com"); // 重新加载当前页面(刷新当前页面) window.location.reload(); // 在history中向后跳转 window.history.back(); window.history.go(-1); // 向前跳转 window.history.forward(); window.history.go(1); // 当前页 window.history.go(0); 八、正则表达式 1.修饰符 i 忽略大写小写匹配g 全局匹配m 多行匹配 2.正则方法

代码如下（ 正则表达式.方法名(字符串) ）

var str = "test"; // 正则表达式 var reg = /test/i; // 判断是否符合匹配 reg.test(str); // true 方法属性test()验证字符串是否符合正则 返回true 或 falseexec()验证字符串是否符合正则 返回数组 或 nullcomplie()重写正则表达式规则lastIndex ()可读可写，表示下一次匹配从哪个下标开始（全局匹配）source()可读,返回正则表达式的字符串形式（不包括反斜杠）

常见字符串搭配正则使用：

方法属性match()返回数组（全局匹配下拿到所有）search()查找replace()替换 3.正则表达式模式 方法属性[]字符集, 括号里面的每一个字符 都可以匹配到[^]脱字符: 如果方括号内的第一个字符是[^]，则表示除了字符集之中的字符，或 以…开头-连字符， 用来提供简写形式，表示字符的连续范围。比如，[abc]可以写成[a-c].除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外, 可以匹配所有字符\转义符：^、.、[、$、(、)、|、*、+、?、{ 、\\ 在它们前面要加上反斜杠$以…结尾|在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog\n匹配换行键\r匹配回车键\t匹配制表符 tab（U+0009）\0匹配null字符（U+0000\xhh匹配一个以两位十六进制数（\x00-\xFF）表示的字符\uhhhh匹配一个以四位十六进制数（\u0000-\uFFFF）表示的 Unicode 字符 4.重复类

介绍：模式的精确匹配次数，使用大括号{}表示。

方法属性{n}表示恰好重复n次，{min,}表示至少重复min次，{min,max}表示重复最少min次, 最多max次 5.量词符

介绍：量词符用来设定某个模式出现的次数。

方法属性?问号表示某个模式出现0次或1次，等同于{0, 1}。*星号表示某个模式出现 任意次（0次或多次），等同于{0,}。+加号表示某个模式出现1次或多次，等同于{1,}。 6.先行断言 方法属性?=n先行断言 某种规则后面紧跟着字符n, 才可以被匹配到 7.先行否定断言 方法属性?!n先行否定断言 某种规则后面不跟着字符n, 才可以被匹配到 九、其它 1.this绑定 call()apply()bind()

代码如下:（例子）

function _this(){ console.log(this+"=>姓名："+this.name+",年龄:"+this.age); } let obj = { name:"张三", age:18, fn:function(){ _this(); // [object Window]=>姓名：,年龄:undefined _this.call(this); // [object Object]=>姓名：李四,年龄:18 _this.apply(this); // [object Object]=>姓名：李四,年龄:18 _this.bind(this)(); // [object Object]=>姓名：李四,年龄:18 } } obj.fn(); 2.constructor

构造函数: Object Array String Number Date Boolean …（Math 例外,它不是构造器)。所有对象都会从它的原型上继承一个 constructor 属性：

var o = {}; o.constructor === Object; // true var o = new Object; o.constructor === Object; // true 3. instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

function Car(make) { this.make = make; } let auto = new Car('Honda'); console.log(auto instanceof Car); // true 4.继承

代码如下:（拷贝继承）

function Animal(){} Animal.prototype.species = "动物"; function Cat(){ this.name = "大猫"; this.color = "黄色"; } // 继承的方法 function extend(Child, Parent){ var p = Parent.prototype; var c = Child.prototype; // 把父元素的原型里面的每一个属性 赋值给 子元素的原型 for(var i in p){ c[i] = p[i]; } } // 继承 extend(Cat, Animal); // 实现了拷贝的效果 var cat1 = new Cat(); console.log(cat1.species); // 动物 console.log(Cat.prototype); // Object... 5.字符串(String)与json的相互转换 1.字符串转json parse()eval()

代码如下:（例子）

let str = `{"name":"张三","age":18}`; console.log( eval('('+str+')')); // 不安全，eval会执行json串中的表达式 console.log( JSON.parse(str)); // key名称(例如name)全部必须有双引号 2.json转字符串 stringify()

代码如下:（例子）

let obj = { "name":"张三", "age":18, }; let str = JSON.stringify(obj); // {"name":"张三","age":18} console.log(typeof str); // String console.log(str.constructor == String); // true 6.其它 属性说明isNaN()查看其它类型是不是非数字toFixed()保留小数isInteger()判断是否为整数Math.min()取最小值Math.max()取最大值preventDefault()通知浏览器不要执行与事件相关联的默认动作stopPropagation()取消事件进一步捕获或者冒泡

欢迎浏览我的个人博客地址



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3